<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings to match the original image
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineCap = 'butt';

        // --- Draw the U-shaped container ---
        // It's drawn as two separate U-shapes (outer and inner walls)
        ctx.beginPath();
        // Outer wall
        ctx.moveTo(100, 100);
        ctx.lineTo(100, 280);
        ctx.lineTo(400, 280);
        ctx.lineTo(400, 100);
        
        // Inner wall
        ctx.moveTo(130, 100);
        ctx.lineTo(130, 250);
        ctx.lineTo(370, 250);
        ctx.lineTo(370, 100);
        ctx.stroke();
        
        // --- Draw the dimension lines and labels ---
        ctx.lineWidth = 1.5;

        // Dimension 'd'
        ctx.beginPath();
        ctx.moveTo(70, 100); // Vertical line
        ctx.lineTo(70, 250);
        ctx.moveTo(60, 100); // Top tick
        ctx.lineTo(80, 100);
        ctx.moveTo(60, 250); // Bottom tick
        ctx.lineTo(80, 250);
        ctx.stroke();
        ctx.font = 'italic 24px serif';
        ctx.textAlign = 'right';
        ctx.fillText('d', 60, 185);

        // Dimension 'A1'
        ctx.beginPath();
        ctx.moveTo(100, 80); // Horizontal line
        ctx.lineTo(130, 80);
        ctx.moveTo(100, 70); // Left tick
        ctx.lineTo(100, 90);
        ctx.moveTo(130, 70); // Right tick
        ctx.lineTo(130, 90);
        ctx.stroke();
        
        // Label for A1
        ctx.font = 'italic 22px serif';
        ctx.textAlign = 'center';
        ctx.fillText('A', 115, 72);
        ctx.font = 'italic 16px serif';
        ctx.fillText('1', 125, 76);

        // Dimension 'A2'
        ctx.beginPath();
        ctx.moveTo(370, 80); // Horizontal line
        ctx.lineTo(400, 80);
        ctx.moveTo(370, 70); // Left tick
        ctx.lineTo(370, 90);
        ctx.moveTo(400, 70); // Right tick
        ctx.lineTo(400, 90);
        ctx.stroke();

        // Label for A2
        ctx.font = 'italic 22px serif';
        ctx.textAlign = 'center';
        ctx.fillText('A', 385, 72);
        ctx.font = 'italic 16px serif';
        ctx.fillText('2', 395, 76);

        // --- Draw the caption ---
        ctx.font = 'bold 20px serif';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 1.243.', 250, 350);

    </script>
</body>
</html>